<template>
    <div class="advanced"> 
        <div class="setting_zuo">
			<el-menu
                router
                :default-active="activemenu" 
				class="el-menu-vertical-demo"
				:background-color="color1"
				:text-color="($store.state.darkMode) ? '#fff' : '#7A7A7A'"
				style="height:100%;">
				<el-menu-item index="/Advanced/Information">
					<i class="icon iconfont icon-xitongxinxi" style="font-size:16px;"> </i>
					<span slot="title"> 系统信息</span>
				</el-menu-item>
				<el-menu-item index="/Advanced/Systems" v-if="$store.state.webconsole">
					<i class="iconfont icon-caozuoxinxi" style="font-size:16px;"> </i>
					<span slot="title"> {{$t("message.left.Systems")}}</span>
				</el-menu-item>
				<el-menu-item index="/Advanced/Storages" v-if="$store.state.webconsole">
					<i class="icon iconfont icon-cunchu" style="font-size:16px;"> </i>
					<span slot="title"> {{$t("message.left.storage")}}</span>
				</el-menu-item>
				<el-menu-item index="/Advanced/Terminals" v-if="$store.state.webconsole">
					<i class="icon iconfont icon-zhongduan" style="font-size:16px;"> </i>
					<span slot="title"> {{$t("message.left.Terminals")}}</span>
				</el-menu-item>
				<el-menu-item index="/Advanced/Metrics" v-if="$store.state.webconsole">
					<i class="icon iconfont icon-xingnengzhibiaoshuju" style="font-size:16px;"> </i>
					<span slot="title"> {{$t("message.left.Metrics")}}</span>
				</el-menu-item>
				<el-menu-item index="/Advanced/Network" v-if="$store.state.webconsole">
					<i class="icon iconfont icon-wangluopeizhi" style="font-size:16px;"> </i>
					<span slot="title"> {{$t("message.left.Network")}}</span>
				</el-menu-item>
			</el-menu>
		</div>
		<div class="setting_you">
			<router-view></router-view>
		</div>
    </div>
</template>
<script>

export default {
    name:'Advanced',
    data(){
        return{
            activemenu:'/Advanced/Information',
			color1:''
        }
    },
	watch:{
		contractFile(data){
			if (data == 'blue') {
				this.color1 = '#1f2540'
			}else if(data == 'c-dark-theme'){
				this.color1 = '#0c0c0c'
			}else{
				this.color1 = '#f5f5f5'
			}
		}
	},
	computed: {
		contractFile() {
			return this.$store.state.darkMode
		}
	},
	methods:{
		menuList(){ 
            let path = this.$route.path
			// console.log(path,this.$route)
            this.activemenu = path
        }
		
	},
	mounted(){
		this.menuList();
	},
}
</script>
<style lang="scss" scoped>
.advanced{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .setting_zuo{
		.icon{
			font-size: 18px;
		}
        .el-menu{
            border: none;
            .el-submenu{
                .el-menu-item{
                    &.is-active {
                        border: none;
                        .Setting_tree{
                            padding-right: 50px;
                            border-right: 2px solid #2E9EFB;
                        }
                        color: #FFFFFF;
                    }
                    
                }
            }
        }
		width: 16%;
		height: 91vh;
		overflow-y: auto;
	}
    .setting_you{
		width: 84%;
		height: 91vh;
		padding: 10px 10px;
		overflow-y: auto;
		// background-color: #171717;
	}
}
</style>
